<template>
  <div class="chart-carousel">
    <div class="arrow-box">
      <div class="arrow" @click="handleChangeChart(TYPE.DECREMENT)">
        <i class="el-icon-arrow-left" />
      </div>

      <div class="arrow" @click="handleChangeChart(TYPE.INCREMENT)">
        <i class="el-icon-arrow-right" />
      </div>
    </div>
    <template v-if="!loading">
      <TodayMealData
        v-if="currentChart === 0"
        :chart-title-options="todayChartTitleOptions"
        :ring-chart-data="todayMealRingChartData"
      />

      <DiningRate
        v-if="currentChart === 1"
        :data="data"
        :ring-chart-data="diningRateData"
      />

      <DepartmentMealData
        v-if="currentChart === 2"
        :data="data"
        :department-data="todayMealRingChartData"
      />
    </template>

    <template v-else>
      <div
        v-loading="loading"
        style="height: 300px;"
      />
    </template>

  </div>
</template>
<script>
import TodayMealData from '@/views/repast/components/TodayMealData.vue'
import DiningRate from '@/views/repast/components/DiningRate.vue'
import DepartmentMealData from '@/views/repast/components/DepartmentMealData.vue'
import { generateRandomHexColor } from '@/utils'
export default {
  name: '',
  components: {
    TodayMealData,
    DiningRate,
    DepartmentMealData
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentChart: 0,
      TYPE: {
        INCREMENT: 'increment',
        DECREMENT: 'decrement'
      },
      chartType: {
        0: 'today',
        1: 'diningRate',
        2: 'departmentMealData'
      }
    }
  },
  computed: {
    todayChartTitleOptions() {
      const total = this.data?.totalUserCount
      const percent = parseFloat((this.data?.count / total * 100).toFixed(2))
      return {
        title: this.data?.count,
        subTitle: `${this.data?.count}/${total} (${percent}%)`
      }
    },
    todayMealRingChartData() {
      return this.data?.department.map(item => {
        return {
          label: item.department_name,
          value: item.mealCount,
          id: item.department_id,
          color: generateRandomHexColor()
        }
      })
    },
    diningRateData() {
      return [
        { label: '已用餐', value: this.data?.isEat, color: '#66C23A' },
        { label: '未用餐', value: this.data?.notEat, color: '#2F88FF' }
      ]
    }
  },
  methods: {
    handleChangeChart(type) {
      if (this.loading) return
      if (type === this.TYPE.INCREMENT) {
        this.currentChart = this.currentChart >= 2 ? 0 : this.currentChart + 1
      } else {
        this.currentChart = this.currentChart <= 0 ? 2 : this.currentChart - 1
      }
      this.$emit('change', this.chartType[this.currentChart])
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-carousel {
  position: relative;

  .arrow-box {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9;
    display: flex;
    justify-content: space-between;

    .arrow {
      width: 36px;
      height: 36px;
      text-align: center;
      line-height: 36px;
      border-radius: 50%;
      background-color: #E0E0E0;
      color: #FFFFFF;
      transition: all .3s;
      &:hover {
        background-color: rgba(31,45,61,.23);
      }
    }
  }
}
</style>
